<ion-view left-buttons="leftButtons"
          class="view-invitation">
  <ion-nav-title>
    {{'INVITATION.LIST.TITLE' | translate}}
  </ion-nav-title>

  <ion-content class="padding no-padding-xs" scroll="true">

    <!-- Buttons bar-->
    <div class="hidden-xs hidden-sm padding text-center" ng-if="!loading">

      <button class="button button-stable button-small-padding icon ion-loop ink"
              ng-click="load()">
      </button>

      <button class="button button-raised button-calm ink"
              ng-click="showNewInvitationModal()">
        {{'INVITATION.BTN_NEW_INVITATION' | translate}}
      </button>

      <button class="button button-stable icon-right ink"
              ng-click="showActionsPopover($event)">
        &nbsp; <i class="icon ion-android-more-vertical"></i>&nbsp;
        {{'COMMON.BTN_OPTIONS' | translate}}
      </button>
    </div>

    <div class="row no-padding">
      <div class="col col-20 hidden-xs hidden-sm">&nbsp;</div>

      <div class="col no-padding-xs">

        <div class="center padding" ng-if="search.loading">
          <ion-spinner icon="android"></ion-spinner>
        </div>

        <div class="padding gray" ng-if="!search.loading && !search.results.length" translate>
          INVITATION.NO_RESULT
        </div>

        <ng-include src="'plugins/es/templates/invitation/list_invitation.html'"></ng-include>

      </div>

      <div class="col col-20 hidden-xs hidden-sm">&nbsp;</div>

    </div>

  </ion-content>

  <button id="fab-new-invitation"
          class="button button-fab button-fab-bottom-right button-assertive icon ion-android-send visible-xs visible-sm spin"
          ng-click="showNewInvitationModal()">
  </button>
</ion-view>
